<template>
  <!--分页功能-->
  <div class="deit">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 数据管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="cantainer">
        <el-table
          style="width: 100%;"
          :data="
            userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
          "
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column
            label="用户姓名"
            prop="username"
            width="180"
          ></el-table-column>
          <el-table-column
            label="邮箱"
            prop="email"
            width="180"
          ></el-table-column>
          <el-table-column
            label="地址"
            prop="userpost"
            width="200"
          >
          </el-table-column>
        </el-table>
          <p name="userpost"></p>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="userList.length"
        >
          <!--//这是显示总共有多少数据，-->
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      userList: [],
    };
  },
  created() {
    this.handleUserList();
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      console.log(size);
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    handleUserList() {
      // this.$http.get('http://localhost:3000/userList').then(res => {  //这是从本地请求的数据接口，
      //     this.userList = res.body
      // })
      this.userList = [
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
        {
          username: "王荣",
          address: "福建",
          userpost: "我是用户的评论",
        },
      ];
    },
  },
};
</script>

<style scoped></style>
